<template>
    <div class="detail">
        <div class="top" v-show="isShow" :style="styOption">
            <my-top>
                <template v-slot:a>
                    <span @click="$router.back()"><i class="iconfont icon-xiangzuojiantou ok"></i></span>

                </template>
                <template v-slot:b>
                    <span>
                        {{travelName}}
                    </span>
                </template>
            </my-top>
        </div>

        <div class="box">
            <span class="back" @click="$router.back()"><i class="iconfont icon-xiangzuojiantou ok"></i></span>
            <img :src="bannerUrl" alt="" class="det_img">
            <button class="btn"><i class="iconfont icon-tupian t"></i> 7</button>
            <p class="traName">{{travelName}}</p>
        </div>
        <div class="baseinfo">
            <div class="baseinfo_t">
                <div class="l">
                    <span class="yellow1">4.9</span>
                    <span class="yellow2">分</span>
                    <span class="yellow3">很棒</span>
                </div>
                <div class="font">
                    <span>166条评论 </span>
                    <span>两条攻略</span>
                </div>
                <span class="jian"><i class="iconfont icon-xiangyoujiantou"></i></span>
                <div class="gang"></div>
            </div>
            <div class="baseinfo_t">
                <div class="i1">
                    <p>景点简介</p>
                </div>
                <div class="font">开放时间、贴士</div>
                <span class="jian"><i class="iconfont icon-xiangyoujiantou"></i></span>
            </div>
        </div>
        <!--  -->
        <div class="ding">
            <i class="iconfont icon-wxbdingwei"></i>
            <span class="span">北京市西大街404号</span>
            <i class="iconfont icon-xiangyoujiantou"></i>
        </div>
        <!-- 通知 -->
        <div class="inform">
            <div class="content"><i class="iconfont icon-laba"></i> 疫情出行提醒各位观众:大连圣亚海洋世界于2022年8月21日</div>
            <span @click="show=true"><i class="iconfont icon-xiangyoujiantou"></i></span>
        </div>
        <!-- where are you go -->
        <div class="wgo">
            <h3>去哪儿推荐</h3>
            <div class="f8">
                <ul>
                    <li>
                        <div class="f8_left">
                            <div class="head">
                                海洋馆-全天-刷证件入园-成人票
                            </div>
                            <p>可订8月23日</p>
                            <div class="two">
                                <span class="b">条件退</span>
                                <span class="b">无需换票</span>
                            </div>
                        </div>
                        <div class="mach">
                            <div>
                                <span class="money">￥</span>
                                <span class="mon">56.5</span>
                            </div>
                            <button class="may">立即预定</button>
                        </div>
                    </li>
                    <li>
                        <div class="f8_left">
                            <div class="head">
                                海洋馆-全天-刷证件入园-成人票
                            </div>
                            <p>可订8月23日</p>
                            <div class="two">
                                <span class="b">条件退</span>
                                <span class="b">无需换票</span>
                            </div>
                        </div>
                        <div class="mach">
                            <div>
                                <span class="money">￥</span>
                                <span class="mon">56.5</span>
                            </div>
                            <button class="may">立即预定</button>
                        </div>
                    </li>
                    <li>
                        <div class="f8_left">
                            <div class="head">
                                海洋馆-全天-刷证件入园-成人票
                            </div>
                            <p>可订8月23日</p>
                            <div class="two">
                                <span class="b">条件退</span>
                                <span class="b">无需换票</span>
                            </div>
                        </div>
                        <div class="mach">
                            <div>
                                <span class="money">￥</span>
                                <span class="mon">56.5</span>
                            </div>
                            <button class="may">立即预定</button>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="wgo">
            <h3>景区门票</h3>
            <div class="f8">
                <ul>
                    <li>
                        <div class="f8_left">
                            <div class="head">
                                海洋馆-全天-刷证件入园-成人票
                            </div>
                            <p>可订8月23日</p>
                            <div class="two">
                                <span class="b">条件退</span>
                                <span class="b">无需换票</span>
                            </div>
                        </div>
                        <div class="mach">
                            <div>
                                <span class="money">￥</span>
                                <span class="mon">56.5</span>
                            </div>
                            <button class="may">立即预定</button>
                        </div>
                    </li>
                    <li>
                        <div class="f8_left">
                            <div class="head">
                                海洋馆-全天-刷证件入园-成人票
                            </div>
                            <p>可订8月23日</p>
                            <div class="two">
                                <span class="b">条件退</span>
                                <span class="b">无需换票</span>
                            </div>
                        </div>
                        <div class="mach">
                            <div>
                                <span class="money">￥</span>
                                <span class="mon">56.5</span>
                            </div>
                            <button class="may">立即预定</button>
                        </div>
                    </li>
                    <li>
                        <div class="f8_left">
                            <div class="head">
                                海洋馆-全天-刷证件入园-成人票
                            </div>
                            <p>可订8月23日</p>
                            <div class="two">
                                <span class="b">条件退</span>
                                <span class="b">无需换票</span>
                            </div>
                        </div>
                        <div class="mach">
                            <div>
                                <span class="money">￥</span>
                                <span class="mon">56.5</span>
                            </div>
                            <button class="may">立即预定</button>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="popup" v-show="show">

            <div class="popup_content">
                <div class="popup_top">
                    <span><i class="iconfont icon-laba laba"></i>景区公告</span>
                </div>
                <p>疫情出行提醒</p>
                <p>各位观众：故宫博物院于2022年6月7日起，按照75%限流要求恢复开放。入院观众须持有72小时核酸检测阴性证明，配合测温和健康宝查验。感谢您的理解与配合！</p>
                <div class="close" @click="show = false">x</div>
            </div>
        </div>
    </div>
</template>
<script>
import axios from "axios";
import myTop from "./myTop";
export default {
  data() {
    return {
      bannerUrl: "",
      travelName: "",
      getDetail: [],
      isShow: false,
      styOption: {},
      show: false
    };
  },
  components: {
    myTop
  },
  methods: {
    scTop() {
      //获取滚动高度
      let top = document.documentElement.scrollTop;
      //下面可以直接写top 不用赋给this.scrollTop
      this.scrollTop = top;
      //通过top 计算透明程度 因为opacity的值是一位小数用toFixed(1)
      let opacity = (this.scrollTop / 180).toFixed(1);
      //当计算出的opactiy 大于1时就是透明值就为1否则就是自身
      opacity = opacity > 1 ? 1 : opacity;
      //这个是动态style在data里声明styOption对象
      this.styOption = {
        opacity: opacity
      };
      //当滚动高度超过50时开始吸顶
      if (this.scrollTop >= 10) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    }
  },
  destroyed() {
    //页面销毁清除监听
    window.removeEventListener("scroll", this.scTop, true);
  },
  mounted() {
    //监听scroll滚动
    window.addEventListener("scroll", this.scTop, true);
    axios.get("/static/detail.json").then(res => {
      const req = res.data.data;
      console.log(req);
      this.bannerUrl = req.bannerImg;
      this.travelName = req.sightName;
      console.log(this.bannerUrl);
    });
  }
};
</script>
<style lang="stylus" scoped>
.detail {
    width: 100%;
    background-color: #f5f5f5;
    position: relative;

    .popup {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        opacity: 0.9;
        z-index: 9;
        background: #fff;
    }
}

.laba {
    font-size: 0.5rem;
}

.top {
    z-index: 11;
    position: fixed;
    top: 0;
    left: 0;
    background: #07abc5;
}

.box {
    position: relative;

    .det_img {
        width: 100%;
        height: 4.1rem;
    }

    .traName {
        position: absolute;
        bottom: 0.4rem;
        left: 0.2rem;
        color: #fff;
        font-size: 0.36rem;
    }
}

.btn {
    position: absolute;
    line-height: 0.4rem;
    bottom: 1rem;
    left: 0.2rem;
    width: 1.2rem;
    height: 0.4rem;
    border-radius: 0.2rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    font-size: 0.24rem;

    .t {
        font-size: 0.24rem;
    }
}

.back {
    display: block;
    position: absolute;
    top: 0.1rem;
    left: 0.1rem;
    width: 0.72rem;
    height: 0.72rem;
    text-align: center;
    line-height: 0.72rem;
    border-radius: 0.36rem;
    background: rgba(0, 0, 0, 0.6);

    .ok {
        color: #fff;
        font-size: 0.4rem;
    }
}

.gang {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    height: 1rem;
    border-left: 1px solid #ccc;
}

.baseinfo {
    display: flex;
    // justify-content: space-between;
    background-color: #fff;
    width: 100%;
    height: 1.2rem;
    border-top-left-radius: 0.1rem;
    border-top-right-radius: 0.1rem;
    // transform: translateY(-0.06rem);
    position: absolute;
    top: 4rem;
    left: 0;

    .baseinfo_t {
        padding: 0.2rem;
        flex: 1;
        position: relative;
        height: 100%;
    }
}

.l {
    display: flex;
    align-items: center;
    color: #ff9415;

    .yellow1 {
        font-size: 0.4rem;
    }
}

..yellow2 {
    font-size: 0.28rem;
}

.yellow3 {
    display: block;
    margin-left: 0.12rem;
}

.jian {
    position: absolute;
    right: 0.1rem;
    top: 50%;
    transform: translateY(-50%);
}

.font {
    font-size: 0.26rem;
    color: #858585;
    margin-top: 0.2rem;
}

.i1 {
    font-size: 0.32rem;
    color: #333;
}

.ding {
    margin-top: 1.1rem;
    padding: 0 0.1rem;
    display: flex;
    // justify-content: space-between;
    width: 100%;
    height: 0.8rem;
    background: #fff;
    line-height: 0.8rem;
    position: relative;
}

.span {
    border-top: 0.02rem solid #ccc;
    padding-left: 0.12rem;
    display: block;
    width: 7.35rem;
    // margin-left .3rem
}

.inform {
    margin: 0.2rem 0;
    display: flex;
    background: #fff5e5;
    width: 100%;
    height: 0.9rem;
    line-height: 0.9rem;
    padding: 0 0.1rem 0 0.2rem;

    .content {
        width: 7rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #ff9616;
        font-size: 0.26rem;
    }
}

.wgo {
    overflow: hidden;
    background: #fff;
    width: 100%;
    padding: 0.2rem;

    h3 {
        font-size: 0.4rem;
        font-weight: 600;
        line-height: 0.9rem;
    }
}

.f8 {
    width: 7.1rem;
    // height: 6.44rem;
    border-radius: 0.2rem;
    padding: 0.2rem 0.3rem;
    background: #f8f8f8;

    li {
        display: flex;
        width: 6.5rem;
        height: 2rem;
        margin-top: 0.4rem;
        border-bottom: 0.02rem solid #ccc;

        .f8_left {
            display: flex;
            flex-direction: column;
            width: 4.88rem;
            height: 1.6rem;
            justify-content: space-between;
            font-size: 0.28rem;

            .head {
                width: 4.1rem;
            }

            p {
                color: #07abc5;
            }
        }
    }
}

.two {
    color: #07abc5;

    .b {
        padding: 0.02rem;
        border: 0.02rem solid #ccc;
        border-radius: 0.1rem;
    }
}

.mach {
    padding-top: 0.2rem;
}

.mon {
    font-size: 0.4rem;
    color: #ffa41b;
}

.money {
    color: #ffa41b;
}

.may {
    margin-top: 0.2rem;
    width: 1.5rem;
    line-height: 0.52rem;
    background: #ffa41b;
    color: #fff;
    border-radius: 0.26rem;
}

.popup_content {
    width: 6.8rem;
    height: 2.2rem;
    margin: auto;

    p {
        line-height: 0.4rem;
    }
}

.popup_top {
    width: 100%;
    height: 1rem;
    text-align: center;
    margin-top: 2.4rem;
    font-size: 0.4rem;
    color: #f67353;
}

.close {
    margin: 0.2rem auto;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    text-align: center;
    line-height: -0.6rem;
    border: 0.02rem solid #000;
}
</style>
